import React, { useEffect, useState } from 'react';
// 引入 less
import './index.less';
// 引入 icon 图标
import { SetOutline, MessageFill, RightOutline } from 'antd-mobile-icons';
// 引入 组件
import { Badge, Space } from 'antd-mobile';

// 引入 我的订单 组件
import Myorder from './myorder';
import Feature from './feature';
// 引入路由跳转组件
import { history } from 'umi';
import axios from 'axios';

export default function index() {
  // 获取 token
  const [token, setToken] = useState(sessionStorage.getItem('token') || '');
  // 个人信息
  const [personalInfo, setPersonalInfo] = useState(
    JSON.parse(sessionStorage.getItem('userdata') || '{}') || '',
  );
  // 保存个人信息
  const [data, setData] = useState({ face: '', username: '', nickname: '' });

  useEffect(() => {
    getPerson();
  }, []);

  // 获取token，判断是否登录
  const getToken = () => {
    if (!token) {
      console.log('跳转到登录页面');
      return false;
    } else {
      console.log('操作');
      return true;
    }
  };

  // 跳转到个人设置页面
  const goInstall = () => {
    let status = getToken();
    if (status) {
      history.push('/install');
    } else {
      history.push('/login');
    }
  };
  // 跳转到信息
  const goInfo = () => {
    let status = getToken();
    if (status) {
      history.push('/info');
    } else {
      history.push('/login');
    }
  };
  // 获取个人信息
  const getPerson = async () => {
    if (token) {
      let {
        data: { code, msg, data },
      } = await axios.get(`/api/mine/getPerson?id=${personalInfo._id}`);
      if (code == 200) {
        let dataForm = data[0];
        setData({ ...dataForm });
      }
    }
  };

  const goPerson = () => {
    if (token) {
      history.push('/person');
    } else {
      history.push('/login');
    }
  };

  return (
    <div className="mine">
      {/* 顶部设置和消息 */}
      <div className="mine-top">
        {/* 个人设置 */}
        <Badge>
          <div onClick={goInstall}>
            <svg
              className="top-icon"
              style={{ fontSize: '0.65rem', verticalAlign: '1.8px' }}
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="2656"
              width={'1em'}
              height={'1em'}
            >
              <path
                d="M940 596l-76-57.6c0.8-8 1.6-16.8 1.6-26.4s-0.8-18.4-1.6-26.4l76-57.6c20.8-16 26.4-44 12.8-68l-84.8-143.2c-9.6-16.8-28-27.2-47.2-27.2-6.4 0-12 0.8-18.4 3.2L712 228c-15.2-10.4-31.2-19.2-47.2-26.4l-13.6-92c-4-26.4-26.4-45.6-53.6-45.6H426.4c-27.2 0-49.6 19.2-53.6 44.8L360 201.6c-16 7.2-31.2 16-47.2 26.4l-90.4-35.2c-6.4-2.4-12.8-3.2-19.2-3.2-19.2 0-37.6 9.6-46.4 26.4L71.2 360c-13.6 22.4-8 52 12.8 68l76 57.6c-0.8 9.6-1.6 18.4-1.6 26.4s0 16.8 1.6 26.4l-76 57.6c-20.8 16-26.4 44-12.8 68l84.8 143.2c9.6 16.8 28 27.2 47.2 27.2 6.4 0 12-0.8 18.4-3.2L312 796c15.2 10.4 31.2 19.2 47.2 26.4l13.6 92c3.2 25.6 26.4 45.6 53.6 45.6h171.2c27.2 0 49.6-19.2 53.6-44.8l13.6-92.8c16-7.2 31.2-16 47.2-26.4l90.4 35.2c6.4 2.4 12.8 3.2 19.2 3.2 19.2 0 37.6-9.6 46.4-26.4l85.6-144.8c12.8-23.2 7.2-51.2-13.6-67.2zM704 512c0 105.6-86.4 192-192 192S320 617.6 320 512s86.4-192 192-192 192 86.4 192 192z"
                p-id="2657"
                fill="#a8a8a8"
              ></path>
            </svg>
          </div>
        </Badge>
        {/* 消息按钮 */}
        {token ? (
          <Badge content="5" style={{ '--right': '34%', '--top': '5%' }}>
            <div onClick={goInfo}>
              <svg
                className="top-icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="4686"
                width="1em"
                style={{ fontSize: '0.7rem' }}
                height="1em"
              >
                <path
                  d="M238.323409 764.78426c-106.980523-71.483054-175.933965-183.867658-175.933965-310.253136 0-215.956493 201.304795-391.012462 449.610044-391.012462 248.304226 0 449.610044 175.055968 449.610044 391.012462 0 215.94626-201.305819 391.004275-449.610044 391.004275-44.1178 0-86.74669-5.51869-127.026068-15.817244l-115.380844 87.308485c-17.276479 13.057387-31.270191 6.196119-31.270191-15.385409L238.322385 764.78426zM785.674545 513.176802c32.395828 0 58.644655-26.258037 58.644655-58.645678 0-32.395828-26.247804-58.653865-58.644655-58.653865s-58.645678 26.258037-58.645678 58.653865C727.02989 486.918765 753.278717 513.176802 785.674545 513.176802zM511.999488 513.176802c32.394804 0 58.644655-26.258037 58.644655-58.645678 0-32.395828-26.248827-58.653865-58.644655-58.653865-32.395828 0-58.645678 26.258037-58.645678 58.653865C453.35381 486.918765 479.603661 513.176802 511.999488 513.176802zM238.323409 513.176802c32.395828 0 58.645678-26.258037 58.645678-58.645678 0-32.395828-26.248827-58.653865-58.645678-58.653865s-58.644655 26.258037-58.644655 58.653865C179.678754 486.918765 205.926558 513.176802 238.323409 513.176802z"
                  fill="#a8a8a8"
                  p-id="4687"
                ></path>
              </svg>
            </div>
          </Badge>
        ) : (
          <Badge>
            <div>
              <svg
                className="top-icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="4686"
                width="1em"
                style={{ fontSize: '0.7rem' }}
                height="1em"
              >
                <path
                  d="M238.323409 764.78426c-106.980523-71.483054-175.933965-183.867658-175.933965-310.253136 0-215.956493 201.304795-391.012462 449.610044-391.012462 248.304226 0 449.610044 175.055968 449.610044 391.012462 0 215.94626-201.305819 391.004275-449.610044 391.004275-44.1178 0-86.74669-5.51869-127.026068-15.817244l-115.380844 87.308485c-17.276479 13.057387-31.270191 6.196119-31.270191-15.385409L238.322385 764.78426zM785.674545 513.176802c32.395828 0 58.644655-26.258037 58.644655-58.645678 0-32.395828-26.247804-58.653865-58.644655-58.653865s-58.645678 26.258037-58.645678 58.653865C727.02989 486.918765 753.278717 513.176802 785.674545 513.176802zM511.999488 513.176802c32.394804 0 58.644655-26.258037 58.644655-58.645678 0-32.395828-26.248827-58.653865-58.644655-58.653865-32.395828 0-58.645678 26.258037-58.645678 58.653865C453.35381 486.918765 479.603661 513.176802 511.999488 513.176802zM238.323409 513.176802c32.395828 0 58.645678-26.258037 58.645678-58.645678 0-32.395828-26.248827-58.653865-58.645678-58.653865s-58.644655 26.258037-58.644655 58.653865C179.678754 486.918765 205.926558 513.176802 238.323409 513.176802z"
                  fill="#a8a8a8"
                  p-id="4687"
                ></path>
              </svg>
            </div>
          </Badge>
        )}
      </div>

      {/* 头像 个人信息 */}
      <div className="headPortrait">
        {/* 头像 */}
        <div className="head-img" onClick={goPerson}>
          {token ? <img src={data.face} alt="" /> : ''}
        </div>
        {/* 名称 */}
        {token ? (
          <div className="head-name">
            <h3 style={{ marginTop: '10px' }} onClick={goPerson}>
              {data.username ? data.username : data.nickname}
            </h3>
            <span>黄金VIP</span>
          </div>
        ) : (
          <div className="head-name">
            <h2 onClick={goPerson}>未登录</h2>
          </div>
        )}
        {/* 箭头 */}
        <div className="head-jian" onClick={goPerson}>
          <RightOutline />
        </div>
      </div>

      {/* 领卷中心 */}
      <div className="welfare">
        <div className="box">
          <div className="box-left">
            <h3>红包卡卷</h3>
            <span>领卷中心</span>
          </div>
          <div className="box-right">
            <img
              src="https://img1.baidu.com/it/u=1656800091,3020636362&fm=253&fmt=auto&app=138&f=PNG?w=260&h=260"
              alt=""
            />
          </div>
        </div>
        <div className="box">
          <div className="box-left">
            <h3>黄金VIP</h3>
            <span>权益中心</span>
          </div>
          <div className="box-right">
            <img
              src="https://img0.baidu.com/it/u=2430607573,1387498625&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
              alt=""
            />
          </div>
        </div>
        <div className="box" style={{ borderRight: 'none' }}>
          <div className="box-left">
            <h3>红包签到</h3>
            <span>立即签到</span>
          </div>
          <div className="box-right">
            <img
              src="https://img1.baidu.com/it/u=4030392480,3365085898&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=1111"
              alt=""
            />
          </div>
        </div>
      </div>

      {/* 我的订单 */}
      <Myorder token={token} />

      {/* banner */}
      <div className="banner">BANNER</div>

      {/* 特色功能 */}
      <Feature />

      {/* <button onClick={ceshi}>测试按钮</button> */}
    </div>
  );
}
